<html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" type="image/vnd.microsoft.icon" href="images/favicon.ico"/><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/><meta name="mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="description" content=""/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="Integrate AppBar with react-navigation · React Native Paper"/><meta name="twitter:description" content=""/><meta property="og:type" content="website"/><meta property="og:title" content="Integrate AppBar with react-navigation · React Native Paper"/><meta property="og:description" content=""/><title>Integrate AppBar with react-navigation · React Native Paper</title><link type="text/css" rel="stylesheet" href="app.css"/></head><body>
    <script>
      var theme;

      try {
        // Check if there is a preference saved
        theme = localStorage.getItem('preference-theme');
      } catch (e) {
        // Ignore
      }

      if (theme === undefined) {
        try {
          // If no preferred theme is set, read OS preference
          theme = window.matchMedia('(prefers-color-scheme: dark)').matches
            ? 'dark'
            : 'light';
        } catch (e) {
          // Ignore
        }
      }

      if (theme === 'dark') {
        document.body.classList.add('dark-theme');
      }
    </script>
  <div id='root'><div class="Layout_lugqar2"><aside class="SidebarContent_s9nrg4n"><input type="checkbox" id="slide-sidebar" role="button" class="MenuButton_mzfqg8l"/><label for="slide-sidebar" class="MenuIcon_m1mups47">☰</label><div class="MenuContent_mdzibsv"><input type="search" value="" placeholder="Filter…" class="Searchbar_s1nn5lbd"/><nav class="Navigation_nlggdah"><a data-selected="false" class="LinkItem_l1gpol2t" href="index.html">Home</a><a data-selected="false" class="LinkItem_l1gpol2t" href="getting-started.html">Getting Started</a><a data-selected="false" class="LinkItem_l1gpol2t" href="theming.html">Theming</a><a data-selected="false" class="LinkItem_l1gpol2t" href="icons.html">Icons</a><a data-selected="false" class="LinkItem_l1gpol2t" href="fonts.html">Fonts</a><a data-selected="false" class="LinkItem_l1gpol2t" href="using-on-the-web.html">Using on the Web</a><a data-selected="false" class="LinkItem_l1gpol2t" href="recommended-libraries.html">Recommended Libraries</a><a data-selected="false" class="LinkItem_l1gpol2t" href="showcase.html">Showcase</a><a data-selected="false" class="LinkItem_l1gpol2t" href="contributing.html">Contributing</a><a data-selected="false" class="LinkItem_l1gpol2t" href="theming-with-react-navigation.html">Theming with React Navigation</a><a data-selected="true" class="LinkItem_l1gpol2t" href="integrate-app-bar-with-react-navigation.html">Integrate AppBar with react-navigation</a><hr class="SeparatorItem_slziuo3"/><a data-selected="false" class="LinkItem_l1gpol2t" href="activity-indicator.html">ActivityIndicator</a><a data-selected="false" class="LinkItem_l1gpol2t" href="animated-fab.html">AnimatedFAB</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="appbar.html">Appbar</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="appbar-action.html">Appbar.Action</a><a data-selected="false" class="LinkItem_l1gpol2t" href="appbar-back-action.html">Appbar.BackAction</a><a data-selected="false" class="LinkItem_l1gpol2t" href="appbar-content.html">Appbar.Content</a><a data-selected="false" class="LinkItem_l1gpol2t" href="appbar-header.html">Appbar.Header</a></div></div><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="">Avatar</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="avatar-icon.html">Avatar.Icon</a><a data-selected="false" class="LinkItem_l1gpol2t" href="avatar-image.html">Avatar.Image</a><a data-selected="false" class="LinkItem_l1gpol2t" href="avatar-text.html">Avatar.Text</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="badge.html">Badge</a><a data-selected="false" class="LinkItem_l1gpol2t" href="banner.html">Banner</a><a data-selected="false" class="LinkItem_l1gpol2t" href="bottom-navigation.html">BottomNavigation</a><a data-selected="false" class="LinkItem_l1gpol2t" href="button.html">Button</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="card.html">Card</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="card-actions.html">Card.Actions</a><a data-selected="false" class="LinkItem_l1gpol2t" href="card-content.html">Card.Content</a><a data-selected="false" class="LinkItem_l1gpol2t" href="card-cover.html">Card.Cover</a><a data-selected="false" class="LinkItem_l1gpol2t" href="card-title.html">Card.Title</a></div></div><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="checkbox.html">Checkbox</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="checkbox-android.html">Checkbox.Android</a><a data-selected="false" class="LinkItem_l1gpol2t" href="checkbox-ios.html">Checkbox.IOS</a><a data-selected="false" class="LinkItem_l1gpol2t" href="checkbox-item.html">Checkbox.Item</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="chip.html">Chip</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="data-table.html">DataTable</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="data-table-cell.html">DataTable.Cell</a><a data-selected="false" class="LinkItem_l1gpol2t" href="data-table-header.html">DataTable.Header</a><a data-selected="false" class="LinkItem_l1gpol2t" href="data-table-pagination.html">DataTable.Pagination</a><a data-selected="false" class="LinkItem_l1gpol2t" href="data-table-row.html">DataTable.Row</a><a data-selected="false" class="LinkItem_l1gpol2t" href="data-table-title.html">DataTable.Title</a></div></div><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="dialog.html">Dialog</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="dialog-actions.html">Dialog.Actions</a><a data-selected="false" class="LinkItem_l1gpol2t" href="dialog-content.html">Dialog.Content</a><a data-selected="false" class="LinkItem_l1gpol2t" href="dialog-scroll-area.html">Dialog.ScrollArea</a><a data-selected="false" class="LinkItem_l1gpol2t" href="dialog-title.html">Dialog.Title</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="divider.html">Divider</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="">Drawer</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="drawer-item.html">Drawer.Item</a><a data-selected="false" class="LinkItem_l1gpol2t" href="drawer-section.html">Drawer.Section</a></div></div><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="fab.html">FAB</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="fab-group.html">FAB.Group</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="helper-text.html">HelperText</a><a data-selected="false" class="LinkItem_l1gpol2t" href="icon-button.html">IconButton</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="">List</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="list-accordion.html">List.Accordion</a><a data-selected="false" class="LinkItem_l1gpol2t" href="list-accordion-group.html">List.AccordionGroup</a><a data-selected="false" class="LinkItem_l1gpol2t" href="list-icon.html">List.Icon</a><a data-selected="false" class="LinkItem_l1gpol2t" href="list-item.html">List.Item</a><a data-selected="false" class="LinkItem_l1gpol2t" href="list-section.html">List.Section</a><a data-selected="false" class="LinkItem_l1gpol2t" href="list-subheader.html">List.Subheader</a></div></div><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="menu.html">Menu</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="menu-item.html">Menu.Item</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="modal.html">Modal</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="portal.html">Portal</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="portal-host.html">Portal.Host</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="progress-bar.html">ProgressBar</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="radio-button.html">RadioButton</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="radio-button-android.html">RadioButton.Android</a><a data-selected="false" class="LinkItem_l1gpol2t" href="radio-button-group.html">RadioButton.Group</a><a data-selected="false" class="LinkItem_l1gpol2t" href="radio-button-ios.html">RadioButton.IOS</a><a data-selected="false" class="LinkItem_l1gpol2t" href="radio-button-item.html">RadioButton.Item</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="searchbar.html">Searchbar</a><a data-selected="false" class="LinkItem_l1gpol2t" href="snackbar.html">Snackbar</a><a data-selected="false" class="LinkItem_l1gpol2t" href="surface.html">Surface</a><a data-selected="false" class="LinkItem_l1gpol2t" href="switch.html">Switch</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="text-input.html">TextInput</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="text-input-affix.html">TextInput.Affix</a><a data-selected="false" class="LinkItem_l1gpol2t" href="text-input-icon.html">TextInput.Icon</a></div></div><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="toggle-button.html">ToggleButton</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="toggle-button-group.html">ToggleButton.Group</a><a data-selected="false" class="LinkItem_l1gpol2t" href="toggle-button-row.html">ToggleButton.Row</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="touchable-ripple.html">TouchableRipple</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="">Typography</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="caption.html">Caption</a><a data-selected="false" class="LinkItem_l1gpol2t" href="headline.html">Headline</a><a data-selected="false" class="LinkItem_l1gpol2t" href="paragraph.html">Paragraph</a><a data-selected="false" class="LinkItem_l1gpol2t" href="subheading.html">Subheading</a><a data-selected="false" class="LinkItem_l1gpol2t" href="text.html">Text</a><a data-selected="false" class="LinkItem_l1gpol2t" href="title.html">Title</a></div></div></nav></div></aside><main class="Container_c119hgic"><div class="HeaderWrapper_h1b6fqjq"><div class="LogoContainer_lz0sul8"><img src="images/sidebar-logo.svg" alt="Logo" class="LogoImage_l1tdaxxn"/></div><div class="ThemeSwitchDiv_ti2lwtw"><label class="Label_lok00ln" style="--lok00ln-0:#000"><input type="checkbox" disabled="" class="Input_i1midrh5"/><div class="Switch_s120pijg"></div></label><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="23" height="22" fill="orange" viewBox="0 0 130 130" enable-background="new 0 0 129 129"><g><g><path d="m64.5,92.6c15.5,0 28-12.6 28-28s-12.6-28-28-28-28,12.6-28,28 12.5,28 28,28zm0-47.9c11,0 19.9,8.9 19.9,19.9 0,11-8.9,19.9-19.9,19.9s-19.9-8.9-19.9-19.9c0-11 8.9-19.9 19.9-19.9z"></path><path d="m68.6,23.6v-12.9c0-2.3-1.8-4.1-4.1-4.1s-4.1,1.8-4.1,4.1v12.9c0,2.3 1.8,4.1 4.1,4.1s4.1-1.8 4.1-4.1z"></path><path d="m60.4,105.6v12.9c0,2.3 1.8,4.1 4.1,4.1s4.1-1.8 4.1-4.1v-12.9c0-2.3-1.8-4.1-4.1-4.1s-4.1,1.8-4.1,4.1z"></path><path d="m96.4,38.5l9.1-9.1c1.6-1.6 1.6-4.2 0-5.8-1.6-1.6-4.2-1.6-5.8,0l-9.1,9.1c-1.6,1.6-1.6,4.2 0,5.8 0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2z"></path><path d="m23.5,105.6c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l9.1-9.1c1.6-1.6 1.6-4.2 0-5.8-1.6-1.6-4.2-1.6-5.8,0l-9.1,9.1c-1.6,1.6-1.6,4.2 0,5.8z"></path><path d="m122.5,64.6c0-2.3-1.8-4.1-4.1-4.1h-12.9c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.8,4.1 4.1,4.1h12.9c2.2,1.42109e-14 4.1-1.8 4.1-4.1z"></path><path d="m10.6,68.7h12.9c2.3,0 4.1-1.8 4.1-4.1 0-2.3-1.8-4.1-4.1-4.1h-12.9c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.9,4.1 4.1,4.1z"></path><path d="m102.6,106.8c1,0 2.1-0.4 2.9-1.2 1.6-1.6 1.6-4.2 0-5.8l-9.1-9.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l9.1,9.1c0.8,0.8 1.9,1.2 2.9,1.2z"></path><path d="m38.4,38.5c1.6-1.6 1.6-4.2 0-5.8l-9.1-9.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l9.1,9.1c0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2z"></path></g></g></svg></div></div><div class="Inner_ir6lat6"><div><h1 id="integrate-appbar-with-react-navigation">
          <a class="anchor" href="#integrate-appbar-with-react-navigation">
            <svg width="16" height="16">
              <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
            </svg>
          </a>
        Integrate AppBar with react-navigation</h1>
<h2 id="prerequisites">
          <a class="anchor" href="#prerequisites">
            <svg width="16" height="16">
              <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
            </svg>
          </a>
        Prerequisites</h2>
<ul>
<li><code>react-native-paper</code></li>
<li><code>react-navigation</code></li>
</ul>
<p>We assume that you have already installed the mentioned libraries above, otherwise please check out the guides below.</p>
<p> <a href="https://callstack.github.io/react-native-paper/4.0/getting-started">React Native Paper - Getting Started</a></p>
<p> <a href="https://reactnavigation.org/docs/getting-started/">React Navigation - Getting Started</a></p>
<h2 id="stack-navigator">
          <a class="anchor" href="#stack-navigator">
            <svg width="16" height="16">
              <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
            </svg>
          </a>
        Stack Navigator</h2>
<p>We will start with <code>react-navigation</code> by creating a basic navigation stack. Stack navigator gives us a possibility of transition between screens in our app and manage navigation's history. In a simple scenario where there is only one stack navigator present in the app, it resembles a navigation state in a browser.
Screens are pushed and popped from the stack while the user navigates to a new screen or go back to the previous one.</p>
<p>Let's create two screens. A main screen named <code>Home</code> and details screen named <code>Details</code>.</p>
<pre><code class="language-js"><span class="token keyword">import</span> <span class="token string">'react-native-gesture-handler'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> NavigationContainer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@react-navigation/native'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> createStackNavigator <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@react-navigation/stack'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> Stack <span class="token operator">=</span> <span class="token function">createStackNavigator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">NavigationContainer</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Stack.Navigator</span></span> <span class="token attr-name">initialRouteName</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Home<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Stack.Screen</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Home<span class="token punctuation">"</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>HomeScreen<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Stack.Screen</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Details<span class="token punctuation">"</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>DetailsScreen<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Stack.Navigator</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">NavigationContainer</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>At the moment our navigation stack contains two screens and will render <code>HomeScreen</code> or <code>DetailsScreen</code> components according to the current navigation state. We have not implemented those components yet, so let's do this now:</p>
<pre><code class="language-js"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>View<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> Button<span class="token punctuation">,</span> StyleSheet<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">HomeScreen</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>style<span class="token punctuation">.</span>container<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Home Screen</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">View</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">DetailsScreen</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>style<span class="token punctuation">.</span>container<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Details Screen</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">View</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> style <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  container<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    alignItems<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
    justifyContent<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>Once we have finished implementing the components, we can run the app and check how Stack looks like.</p>
<p><img src="screenshots/react-navigation-appBar1.png" alt="navigationAppBar1" /></p>
<p>To navigate from <code>HomeScreen</code> to <code>DetailsScreen</code> we can use the navigation object provided by <code>Stack.Screen</code> component. Every component rendered by <code>Stack.Screen</code> has an access to the navigation object via props. Let's modify our <code>HomeScreen</code> component:</p>
<pre><code class="language-js"><span class="token keyword">function</span> <span class="token function">HomeScreen</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> navigation <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>style<span class="token punctuation">.</span>container<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Home Screen</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span>
        <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Go to details<span class="token punctuation">"</span></span>
        <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> navigation<span class="token punctuation">.</span><span class="token function">navigate</span><span class="token punctuation">(</span><span class="token string">'Details'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
      <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">View</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Our result:</p>
<p><img src="screenshots/react-navigation-appBar2.gif" alt="navigationAppBar2" /></p>
<p>As you can see, we can already navigate between two screens. In the next steps, we will show you how to use Paper's <code>AppBar</code> instead of the default header.</p>
<h3 id="adding-appbar">
          <a class="anchor" href="#adding-appbar">
            <svg width="16" height="16">
              <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
            </svg>
          </a>
        Adding AppBar</h3>
<p>We can customize Stack's header by passing custom component:</p>
<pre><code class="language-js"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">NavigationContainer</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Stack.Navigator</span></span>
        <span class="token attr-name">initialRouteName</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Home<span class="token punctuation">"</span></span>
        <span class="token attr-name">screenOptions</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
          header<span class="token punctuation">:</span> CustomNavigationBar<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Stack.Screen</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Home<span class="token punctuation">"</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>HomeScreen<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Stack.Screen</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Details<span class="token punctuation">"</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>DetailsScreen<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Stack.Navigator</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">NavigationContainer</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Now we will implement <code>CustomNavigationBar</code> using <code>AppBar</code> component:</p>
<pre><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> Appbar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native-paper'</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">CustomNavigationBar</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Appbar.Header</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Appbar.Content</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>My awesome app<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Appbar.Header</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Current implementation of the <code>CustomNavigationBar</code> is simple - we just render a title inside of it. You may notice there is no way to go back to the previous screen, because the back button is not visible in the header. Let's add it now and let's make sure it's visible on all Stack's screens except <code>Home</code> screen.</p>
<p>Firstly, pass navigation props to <code>CustomNavigationBar</code>:</p>
<pre><code class="language-js"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">NavigationContainer</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Stack.Navigator</span></span>
        <span class="token attr-name">initialRouteName</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Home<span class="token punctuation">"</span></span>
        <span class="token attr-name">screenOptions</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
          <span class="token function-variable function">header</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CustomNavigationBar</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token punctuation">...</span><span class="token attr-value">props</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Stack.Screen</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Home<span class="token punctuation">"</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>HomeScreen<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Stack.Screen</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Details<span class="token punctuation">"</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>DetailsScreen<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Stack.Navigator</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">NavigationContainer</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Secondly, we check if the navigation bar receives a <code>back</code> prop. If it has, it means there is another screen on the stack beneath the current screen and we should render the back arrow button in such a case. (The <code>back</code> prop is sent in React Navigation 6.x; in 5.x a prop named <code>previous</code> is sent and can be checked for instead.)</p>
<pre><code class="language-js"><span class="token keyword">function</span> <span class="token function">CustomNavigationBar</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> navigation<span class="token punctuation">,</span> back <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Appbar.Header</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token punctuation">{</span>back <span class="token operator">?</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Appbar.BackAction</span></span> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>navigation<span class="token punctuation">.</span>goBack<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span> <span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">}</span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Appbar.Content</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>My awesome app<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Appbar.Header</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p><img src="screenshots/react-navigation-appBar3.gif" alt="navigationAppBar3" /></p>
<p>Another interesting pattern that can be implemented with <code>react-native-paper</code> and <code>react-navigation</code> is a "hamburger menu". Thanks to the <code>Menu</code> component we can add a nice looking pop-up to our <code>Appbar</code>. To implement this feature we need to make a couple of changes in <code>CustomNavigationBar</code>:</p>
<ul>
<li>Render a <code>Menu</code> component</li>
<li>Pass <code>Appbar.Action</code> to the anchor prop</li>
<li>Add a state to control <code>Menu</code> visibility</li>
</ul>
<p>We also want the menu to appear only on <code>HomeScreen</code>, which means we will render it conditionally based on the <code>back</code> prop.</p>
<pre><code class="language-js"><span class="token keyword">function</span> <span class="token function">CustomNavigationBar</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> navigation<span class="token punctuation">,</span> back <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">[</span>visible<span class="token punctuation">,</span> setVisible<span class="token punctuation">]</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> <span class="token function-variable function">openMenu</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">setVisible</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> <span class="token function-variable function">closeMenu</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">setVisible</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Appbar.Header</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token punctuation">{</span>back <span class="token operator">?</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Appbar.BackAction</span></span> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>navigation<span class="token punctuation">.</span>goBack<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span> <span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">}</span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Appbar.Content</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>My awesome app<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
      </span><span class="token punctuation">{</span><span class="token operator">!</span>back <span class="token operator">?</span> <span class="token punctuation">(</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Menu</span></span>
          <span class="token attr-name">visible</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>visible<span class="token punctuation">}</span></span>
          <span class="token attr-name">onDismiss</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>closeMenu<span class="token punctuation">}</span></span>
          <span class="token attr-name">anchor</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Appbar.Action</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>white<span class="token punctuation">"</span></span> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>openMenu<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span>
          <span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Menu.Item</span></span> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Option 1 was pressed'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Option 1<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Menu.Item</span></span> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Option 2 was pressed'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Option 2<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Menu.Item</span></span> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Option 3 was pressed'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Option 3<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Menu</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">}</span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Appbar.Header</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Final result:</p>
<p><img src="screenshots/react-navigation-appBar4.gif" alt="navigationAppBar4" /></p>
<p>That's all we need! We have app bar that contains everything we need to navigate through screens and access an additional menu on the main screen. As you can see, with Material design <code>Appbar</code> provided by <code>react-native-paper</code> used together with <code>react-navigation</code> we can easily create an app that looks and works great.</p>
</div></div></main></div></div>
    <style type="text/css">
      :root {
        --theme-primary-color: #397AF9;
      }
    </style>
  
    <script>
      window.__INITIAL_PATH__ = 'integrate-app-bar-with-react-navigation';
    </script>
  <script src="app.bundle.js"></script><script src="scripts/snack.js"></script><script src="scripts/version.js"></script></body></html>